<template>
	<view>
		<view class="flex justify-between padding align-center" :style="{'padding-top':CustomBar+'rpx'}">
			<image :src="userInfo.avatar" mode="" class="user_head"></image>
			<view class="head_input" @click="search">
				<image src="/static/home/icon_sysous.png" mode="" class="head_search"></image>
				<input type="text" value="" placeholder="搜索图书/商品/课程" />
			</view>
			搜索
		</view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper_image">
			<swiper-item v-for="(item,index) in images_array" :key='index' class="swiper_image">
				<image :src="item" mode="aspectFill" style="width: 100%;" class="swiper_image"></image>
			</swiper-item>
		</swiper>
		<view class="plugins" @click="$tools.push('/pages/product/product')">
			<view v-for="(item,index) in pluginsList " :key='index' class="plugins_body">
				<view class="text-center ">
					<image :src="item.image" mode="" class="plugins_image"></image>
					<view class="plugins_title">{{item.title}}</view>
				</view>
			</view>
		</view>

		<view class="bg-white padding solid-top padding-top">
			<view class="rowsa text-center  solid-bottom ">
				<view v-for="(item,index) in orderClassifyList" :key="index" @click="orderNum=index">
					<view class="classify_title" :class="{classify_title_active:index ==orderNum}">{{item.title}}</view>
					<view class="classify_heng margin-top-sm" v-if="index == orderNum"></view>
				</view>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="align-center ">
				<view class="card_shu"></view>
				<view class="card_title">公司环境</view>
			</view>
			<view class="rowsc margin-top">
				<image :src="environmentImg" mode="aspectFill" style="height: 300rpx;" class="bg-gray"></image>
			</view>
			<view class="align-center margin-top">
				<view class="card_shu"></view>
				<view class="card_title">公司简介</view>
			</view>
			<view>
			 <view v-html="introduceValue"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getbanner
	} from '../../common/path.js'
	export default {
		data() {
			return {
				url:this.$path.url,
				userInfo: uni.getStorageSync('userInfo'),
				CustomBar: this.CustomBar,
				// 分类
				pluginsList: [{
						image: '/static/home/icon_yuedubaogao.png',
						title: '产品型号',
					},

				],
				introduceValue:'',//简介
				orderNum: 0,
				orderClassifyList: [{
						title: '公司简介'
					},
					{
						title: '品牌宣传'
					},
					{
						title: '公司动态'
					}
				],
				images_array: [], //轮播图
				environmentImg:''

			}
		},

		onLoad() {},
		onShow() {
			uni.removeStorage({
				key: 'productTypeList'
			});
			uni.removeStorage({
				key: 'arrayList_id01'
			});
			uni.removeStorage({
				key: 'arrayList_id02'
			});
			uni.removeStorage({
				key: '__DC_STAT_UUID'
			});
		},
		onLoad() {
			this.getbanner()
		},
		methods: {
			search() {
				this.$tools.push('/pages/plugins/search')
			},
			// 轮播图
			getbanner() {
				let data =
					this.Http.POST(getbanner, {
						keyword: 'RotationChart', //首页轮播图
					}).then((res) => {
						if (res.code == 1) {
							// console.log('[轮播图]', res);
							this.images_array = res.data.images_array
						}
					})
				this.Http.POST(getbanner, {
					keyword: 'Environment', //公司环境
				}).then((res) => {
					if (res.code == 1) {
						this.environmentImg =  res.data.images_array[0]
						// console.log('[公司环境]', this.environmentImg);
					}
				})
				this.Http.POST(getbanner, {
					keyword: 'Introduce', //公司介绍
				}).then((res) => {
					if (res.code == 1) {
						// console.log('[公司介绍]', res);
						this.introduceValue = res.data.value
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F5F6F8;
	}

	.user_head {
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		background-color: #EEEEEE;
		opacity: 1;
	}

	.head_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.head_input {
		display: flex;
		align-items: center;
		width: 539rpx;
		height: 69rpx;
		background: #EDEEF3;
		opacity: 1;
		line-height: 69rpx;
		border-radius: 9rpx;

		input {
			width: 100%;
			font-size: 24rpx;
			margin-left: 10rpx;
		}

		.head_search {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}

	}

	.swiper_image {
		width: 716rpx;
		height: 284rpx;
		opacity: 1;
		border-radius: 15rpx;
		background-color: #EEEEEE;
		margin: 0 auto;
		overflow: hidden;
	}

	.plugins {
		display: flex;
		background-color: white;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 30rpx;

		.plugins_body {
			flex: 0 0 25%;
			margin-top: 30rpx;
		}

		.plugins_image {
			width: 93rpx;
			height: 80rpx;
		}

		.plugins_title {
			font-size: 28rpx;
			font-family: SourceHanSansCN-Normal;
			color: #333333;
			opacity: 1;
		}
	}

	.classify_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: #757575;
	}

	.classify_title_active {
		font-size: 30rpx;
		font-family: PingFang SC;
		opacity: 1;
		color: #007AFF;
		font-weight: bold;
	}

	.classify_heng {
		height: 4rpx;
		background: #007AFF;
		border-radius: 2rpx;
	}

	.card {
		margin-top: 20rpx;
		width: 718rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.card_shu {
		width: 9rpx;
		height: 36rpx;
		background: #007AFF;
		opacity: 1;
		border-radius: 5px;
	}

	.card_title {
		margin-left: 30rpx;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 56rpx;
		color: #000000;
		opacity: 1;
	}
</style>
